<template>
	<view class="content">
		<view class="status"></view>
		<view class="nav">
			<view class="left">
				<u-icon class="icon" name="arrow-left" size="44rpx" color="#444446" @click="toBack()"></u-icon>
			</view>
			<view class="center">
				嘉云支付
			</view>
			<view class="right">
				筛选
			</view>
		</view>
		<view class="header_nav">
			<view class="tab_nemu">
				
				<view class="item" @click="changeIndex(0)" :class="{itemactive:current==0}">
					全部
				</view>
				<view class="item" @click="changeIndex(1)" :class="{itemactive:current==1}">
					闪付
				</view>
				<view class="item" @click="changeIndex(2)" :class="{itemactive:current==2}">
					扫码收款
				</view>
				<view class="item" @click="changeIndex(3)" :class="{itemactive:current==3}">
					刷脸收款
				</view>
				<view class="item" @click="changeIndex(4)" :class="{itemactive:current==4}">
					碰一碰
				</view>
			</view>
			<view class="empty" :style="{left:current*20+11+'%'}"></view>
		</view>

		<view class="substance">
			<view class="choose_date" @click="show = true">
				<text
					style="align-items: center;line-height: 60rpx;color: #383A46;margin-right: 10rpx;">{{chooseDate}}</text>
				<u-icon name="arrow-down"></u-icon>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in 5" :key="index">
				<view class="title">
					支付成功金额: <text
						style="color: #EE0512;font-size: 32rpx;line-height: 60rpx;font-weight: 800;">100.00</text>
				</view>
				<view class="info">
					<view class="order_no">
						<view class="left">
							<image src="../../static/icon_img/order_log.png" />
							<text>订单号: DS20211201155728130494888</text>
						</view>
						<view class="right">
							已支付
						</view>
					</view>
					<view class="trading_time">
						<view class="left">
							交易时间:2021-12-01 15:57:28
						</view>
						<view class="right">
							+100.00
						</view>
					</view>
					<view class="bank">
						交通银行6222****4932
					</view>
				</view>
			</view>
		</view>
		<u-datetime-picker :show="show" v-model="value1" mode="year-month" @cancel="dateClose" @confirm="dateConfirm">
		</u-datetime-picker>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				show: false,
				value1: Number(new Date()),
				chooseDate: '',
				
			}
		},
		onLoad() {
			var date = new Date();
			this.chooseDate = this.conversionDate(date)
		},
		methods: {
			dateClose() {
				this.show = false
			},
			dateConfirm(e) {
				let time = e.value
				let nt = this.conversionDate(time);
				this.chooseDate = nt;
				this.show = false;
			},
			changeIndex(index) {
				this.current = index
			},
			//将时间戳转化为日期格式
			conversionDate(time) {
				var date = new Date(time);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				var rt = y + "年" + m + "月";
				return rt;
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			}


		}
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss">
	.content {
		text-align: center;
		align-items: center;
		width: 100%;
		padding-bottom: 140rpx;

		.status {
			height: var(--status-bar-height);
			background-color: #CD251E;
		}

		.nav {
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: auto 40rpx;

			.center {
				font-style: normal;
				color: #464B52;
				font-size: 33rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
			}

			.right {
				height: 120rpx;
				text-align: center;
				align-items: center;
				font-size: 28rpx;
				align-items: center;
				line-height: 120rpx;
			}
		}

		.header_nav {
			height: 70rpx;

			.tab_nemu {
				height: 70rpx;
				background-color: #ffffff;
				display: flex;

				.item {
					height: 70rpx;
					line-height: 70rpx;
					width: 20%;
					text-align: center;
					align-items: center;
					color: #423E4F;
					font-size: 30rpx;
				}

				.itemactive {
					height: 70rpx;
					line-height: 70rpx;
					width: 20%;
					text-align: center;
					align-items: center;
					color: #F7485F;
					font-size: 30rpx;
					font-weight: 400;
				}
			}

			.empty {
				height: 8rpx;
				background: #BC100c;
				width: 40rpx;
				position: absolute;
				transition: 0.5s;
				margin-left: -30rpx;
				margin-top: -6rpx;
				border-radius: 50rpx;
			}
		}

		.substance {
			text-align: center;
			align-items: center;
			height: 60rpx;
			margin-top: 10rpx;

			.choose_date {
				height: 60rpx;
				display: flex;
				padding-left: 40rpx;
			}
		}

		.list {
			text-align: center;

			.item {
				text-align: center;
				height: 350rpx;
				margin-top: 10rpx;

				.title {
					text-align: left;
					height: 60rpx;
					align-items: center;
					color: #383A46;
					padding-left: 40rpx;
					font-weight: 500;
				}

				.info {
					height: 280rpx;
					background-color: #ffffff;
					margin: auto 32rpx;
					border-radius: 20rpx;
					margin-top: 10rpx;
					padding: 20rpx;

					.order_no {
						height: 100rpx;
						display: flex;
						justify-content: space-between;

						.left {
							width: 85%;
							height: 100rpx;
							display: flex;
							align-items: center;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;

							image {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
							}

							text {
								font-size: 20rpx;
								font-weight: bold;
								color: #3F3D48;
								margin-left: 8rpx;
							}
						}

						.right {
							width: 15%;
							height: 100rpx;
							font-size: 30rpx;
							font-weight: 600;
							color: #39B196;
							align-items: center;
							line-height: 100rpx;
						}
					}

					.trading_time {
						height: 80rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							height: 80rpx;
							font-size: 28rpx;
							font-weight: 600;
							color: #CACDDB;
							align-items: center;
							line-height: 80rpx;
							margin-left: 8rpx;

						}

						.right {
							height: 80rpx;
							font-size: 32rpx;
							font-weight: 800;
							color: #3C3D43;
							align-items: center;
							line-height: 80rpx;
						}
					}

					.bank {
						height: 80rpx;
						text-align: right;
						font-size: 28rpx;
						font-weight: 800;
						color: #737195;
						align-items: center;
						line-height: 80rpx;
					}
				}
			}

		}
	}
</style>
